<template>
    <div class="Alltype">
        <!--      头-->
        <Top>
            <i class="el-icon-close back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">全部分类</p>
        </Top>
        <!--       中-->
        <div class="main" v-if="infos">
            <!--热门标签-->
            <div class="box">
                <h3>{{infos.cat.name}}</h3>
                <ul class="tagList clearfix">
                    <li :class="{on:catIndex===index}" v-for="(item,index) in infos.cat.value" :key="index" @click="switchCat(item,index)">{{item.cat_name}}</li>
                </ul>
            </div>
            <!--课程等级-->
            <div class="box">
                <h3>{{infos.class.name}}</h3>
                <ul class="tagList clearfix">
                    <li :class="{on:classIndex===index}" v-for="(item,index) in infos.class.value" :key="index" @click="switchLessonLv(item,index)">{{item.name}}</li>
                </ul>
            </div>
            <!--花艺师等级-->
            <div class="box">
                <h3>{{infos.teacher.name}}</h3>
                <ul class="tagList clearfix">
                    <li :class="{on:teacherIndex===index}" v-for="(item,index) in infos.teacher.value" :key="index" @click="switchTeacherLv(item,index)">{{item.name}}</li>
                </ul>
            </div>
        </div>
        <!--       尾-->
        <p class="button" @click="confirm">确定</p>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'Alltype',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loadin: false,
                infos:null,//页面数据对象

                catIndex:0,//分类默认选中
                classIndex:0,//分类默认选中
                teacherIndex:0,//分类默认选中

                cat_id:0,//分类id
                lession_type:0,//课程等级
                teacher_type:0,//花艺师等级
            }
        },
        created(){
            var that = this
            this.loading = true;
            this.Posthttp('/?method=flower.index.getHotCat',{member_id:this.getMemberId()},(res)=>{
                this.loading = false
                this.infos = JSON.parse(res.bodyText).data
            });
        },
        methods:{
            //分类选择（热门标签）
            switchCat(item,index){
                this.catIndex = index;
                this.cat_id = item.cat_id;   
            },
            //课程等级
            switchLessonLv(item,index){
                this.classIndex = index;
                this.lession_type = item.id;   
            },
            //花艺师等级
            switchTeacherLv(item,index){
                this.teacherIndex = index;
                this.teacher_type = item.id;   
            },
            //确认提交
            confirm(){
                this.$router.push({ path: '/keyword', query:{ 
                    cat_id:this.cat_id,
                    lession_type:this.lession_type,
                    teacher_type:this.teacher_type
                }})
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Alltype {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 20;
        background-color: #fff;
        .main{
            position: absolute;
            bottom: .8rem;
            padding: 0 .2rem;
            background-color: #fff;
            .box{
                padding-top: .4rem;
                color: #333;
                h3{
                    font-size: .26rem;
                    margin-bottom: .08rem;
                }
                .tagList{
                    li{
                        float: left;
                        width: 1.76rem;
                        height: .6rem;
                        line-height: .6rem;
                        background-color: #f2f2f2;
                        border-radius: .1rem;
                        margin-right: .34rem;
                        text-align: center;
                        margin-top: .3rem;
                        &:nth-of-type(3n){
                            margin-right: 0;
                        }
                        &.on{
                            background-color: #ffe4db;
                        }
                    }
                }
            }
        }
        .button{
            width: 100%;
            height: .8rem;
            line-height: .8rem;
            position: absolute;
            left: 0;
            bottom: 0;
            color: #fff;
            text-align: center;
            background-color: #eb5b29;
            font-size: .3rem;
            letter-spacing: .02rem;
        }
    }
</style>
